<template>
  <el-container class="main">
    <el-header>
      <div class="logo_box">
        <img src="../assets/logo.png" alt="" />
        <p>电商后台管理</p>
      </div>
      <div class="user_box">
        <p>欢迎您，admin</p>
        <div>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="exit">
            <el-button type="info" slot="reference">退出</el-button>
          </el-popconfirm>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle_collapse" @click="isCollapse = !isCollapse">|||</div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409eff"
          :collapse-transition="false"
          router
          :unique-opened="true"
        >

          <el-submenu :index="item.id+''" v-for="item in menus" :key="item.id" >
            <template slot="title">
              <i :class="menu_icons[item.id]"></i>
              <span slot="title">{{ item.authName }}</span>
            </template>
            <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id">
              <i class="el-icon-menu"></i>
              {{item2.authName}}
            </el-menu-item>
          </el-submenu>

          <!-- <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span slot="title">权限管理</span>
            </template>
            <el-menu-item index="/roles">
              <i class="el-icon-menu"></i>
              角色列表
            </el-menu-item>
            <el-menu-item index="/rights">
              <i class="el-icon-menu"></i>
              权限列表
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span slot="title">商品管理</span>
            </template>
            <el-menu-item index="/list">
              <i class="el-icon-menu"></i>
              商品列表
            </el-menu-item>
            <el-menu-item index="/params">
              <i class="el-icon-menu"></i>
              分类参数
            </el-menu-item>
            <el-menu-item index="/cate">
              <i class="el-icon-setting"></i>
              商品分类
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span slot="title">订单管理</span>
            </template>
            <el-menu-item index="/order">
              <i class="el-icon-menu"></i>
              订单列表
            </el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span slot="title">数据统计</span>
            </template>
            <el-menu-item index="/report">
              <i class="el-icon-menu"></i>
              报表
            </el-menu-item>
          </el-submenu> -->
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      menus:[],
      menu_icons:{
        "125":"el-icon-user-solid",
        "103":"el-icon-s-cooperation",
        "101":"el-icon-s-goods",
        "102":"el-icon-s-order",
        "145":"el-icon-s-data"
      }
    };
  },
  methods:{
    exit(){
      sessionStorage.clear();
      this.$router.push('/login')
    },
    async getMenu(){
      const {data:{data,meta}} = await this.$http.get('menus');
      if(meta.status!==200) return this.$message.error('获取菜单失败')
      this.menus=data;
    }
  },
  created(){
    this.getMenu()
  }
};
</script>
<style lang="less" scoped>
.el-menu {
  border: none;
}
.main {
  height: 100%;
  .el-header {
    background-color: #373d41;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .user_box {
      display: flex;
      align-items: center;
      p {
        margin-right: 20px;
      }
    }
    .logo_box {
      img {
        width: 50px;
        height: 50px;
        float: left;
        margin-top: 3px;
      }
      p {
        float: left;
        margin-left: 20px;
      }
    }
  }
  .el-aside {
    background-color: #333744;
    .toggle_collapse {
      background-color: #4a5064;
      color: #fff;
      text-align: center;
      line-height: 24px;
      font-size: 10px;
      letter-spacing: 3px;
      cursor: pointer;
      
    }
  }
  .el-main {
    background-color: #eaedf1;
  }
}
</style>